<template>
  <div class="u-flex">
    <div class="left">
      <div class="title">
        <span>分组</span>
        <u-button icon="btn-add" type="primary"> 新增</u-button>
      </div>
      <a-tree
        default-expand-all
        auto-expand-parent
        show-line
        show-icon
        :tree-data="tree"
        :replaceFields="{
          children: 'children',
          title: 'name', //  == 下拉框显示值 ==
          value: 'name',
          key: 'name',
        }"
      />
    </div>
    <div class="right">
      <div style="margin-top: 20px">
        <a-row type="flex" justify="space-between" align="middle">
          <div class="">
            <a-input
              class="search-input mb-10"
              v-model="model.queryIp"
              placeholder="ip地址"
              allow-clear
              style="width: 190px"
            />

            <a-select
              v-model="model.type"
              placeholder="类型"
              style="width: 140px; margin-right: 10px"
              allowClear
            >
              <a-select-option
                v-for="item in stateList"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
            <a-select
              v-model="model.status"
              placeholder="状态"
              class="search-input"
              style="width: 140px; margin-right: 10px"
              allowClear
            >
              <a-select-option
                v-for="item in stateList"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>

            <u-button
              @click="
                current = 1;
                search();
              "
              >查询
            </u-button>
          </div>
          <u-button icon="btn-add" class="mb-10" @click="add">新增</u-button>
        </a-row>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        size="small"
        :pagination="false"
        :loading="loading"
        style="margin-top: 10px"
        rowKey="index"
        class="overflow-auto"
        :scroll="{ x: 'calc(700px + 50%)' }"
      >
        <!-- 请求方 -->
        <span slot="status" slot-scope="row">
          <u-text v-if="row.terminal_status == '在线'" type="success"
            >在线</u-text
          >
          <u-text v-else type="gray">离线</u-text>
        </span>

        <span slot="cpu" slot-scope="row">
          <a-progress :percent="row.system_cpu_usage" />
        </span>

        <span slot="memory" slot-scope="row">
          <a-progress :percent="row.system_memory_usage" />
        </span>
      </a-table>
      <Pagination
        :total="total"
        :defaultPage="page"
        :defaultCurrent="current"
        @sizeChange="
          (val) => {
            page = val;
            current = 1;
            search();
          }
        "
        @currentChange="currentChange"
      />
      <a-modal
        title="新增"
        :maskClosable="false"
        :keyboard="false"
        :visible="visible"
        :footer="null"
        centered
        :width="600"
        @cancel="visible = false"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          labelAlign="right"
          layout="horizontal"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="名称：" prop="terminal_name">
            <a-input v-model="form.terminal_name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="所属组织：" prop="organization">
            <a-tree-select
              style="width: 100%"
              :tree-data="tree"
              :replaceFields="{
                children: 'children',
                title: 'name',
                value: 'name',
                key: 'name',
              }"
              v-model="form.organization"
              placeholder="请选择"
            />
          </a-form-model-item>
          <a-form-model-item label="IP地址" prop="ip_address">
            <IpAddressVue placeholder="" v-model="form.ip_address" />
          </a-form-model-item>
          <a-form-model-item label="MAC地址" prop="mac_address">
            <a-input v-model="form.mac_address" />
          </a-form-model-item>
        </a-form-model>
        <div class="flex flex-end mt-10">
          <u-button
            type="default"
            style="font-weight: bold"
            @click="visible = false"
            >取消</u-button
          >
          <u-button class="ml-10 btn-default btn-confirm" @click="confirm">
            确定
          </u-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "序号",
    key: "index",
    dataIndex: "index",
    width: 60,
  },
  {
    title: "名称",
    key: "terminal_name",
    dataIndex: "terminal_name",
    width: 100,
  },

  {
    title: "状态",
    key: "status",
    scopedSlots: { customRender: "status" },
    width: 60,
  },
  {
    title: "所属组织",
    key: "organization",
    dataIndex: "organization",
    width: 80,
  },
  {
    title: "IP地址",
    key: "ip_address",
    dataIndex: "ip_address",
  },
  {
    title: "MAC地址",
    key: "mac_address",
    dataIndex: "mac_address",
  },
  {
    title: "操作系统",
    key: "operating_system",
    dataIndex: "operating_system",
  },
  {
    title: "系统CPU利用率",
    key: "system_cpu_usage",
    scopedSlots: { customRender: "cpu" },
    width: 130,
  },
  {
    title: "系统内存利用率",
    key: "system_memory_usage",
    scopedSlots: { customRender: "memory" },
    width: 130,
  },
];
import Pagination from "@/components/Pagination.vue";
import IpAddressVue from "@/components/IpAddress.vue";
import { terminalList, stateList } from "../../config/ternimal/data/ternimal";

const validIpAdress = (field, value, callback) => {
  const reg =
    /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/;
  if (reg.test(value)) {
    return callback();
  }
  callback(new Error("请输入正确的IP地址"));
};
export default {
  components: {
    Pagination,
    IpAddressVue,
  },
  data() {
    return {
      tree: [
        {
          name: "xx公司",
          children: [
            {
              name: "技术部",
              children: [
                {
                  name: "研发组",
                },
                {
                  name: "测试组",
                },
              ],
            },
            {
              name: "市场部",
              children: [
                {
                  name: "销售组",
                },
                {
                  name: "市场推广组",
                },
              ],
            },
          ],
        },
      ],
      stateList,
      columns,
      loading: false,
      data: terminalList,
      page: 10,
      current: 1,
      total: 3,
      model: {
        queryIp: "",
        status: undefined,
        type: undefined,
      },
      form: {
        terminal_name: "",
        organization: "",
        ip_address: "",
        mac_address: "",
      },
      visible: false,
      rules: {
        terminal_name: [
          { required: true, message: "请输入名称", trigger: "blur" },
        ],
        organization: [
          { required: true, message: "请选择所属组织", trigger: "blur" },
        ],
        ip_address: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
          { validator: validIpAdress, trigger: "blur" },
        ],
        mac_address: [
          { required: true, message: "请输入MAC地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    currentChange(val) {
      this.current = val;
      this.search();
    },
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$message.success("新增成功");
          this.visible = false;
        }
      });
    },
    add() {
      this.visible = true;
    },
  },
};
</script>

<style lang="scss">
.app-terminal .app-main {
  background: none;
  padding: 0;
}
</style>

<style lang="scss" scoped>
.left {
  margin-right: 20px;
  position: relative;
  border-radius: 4px;
  padding: 20px 10px;
  background: #fff;
  width: 200px;
  flex-shrink: 0;

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.right {
  flex: 1;
  position: relative;
  border-radius: 4px;
  padding: 20px;
  background: #fff;
}
</style>
